<template>
  <view class="Index">
    <!-- 顶部图片 -->
    <view class="index-images-wrap">
      <image
        class="index-images"
        :src="require('@/assets/index/index_bg.jpg')"
      />
    </view>
    <view class="index-start-games-wrap">
      <button @tap="loginPopup" class="index-start-games-btn">开始游戏</button>
    </view>
    <view class="index-popup-wrap">
      <u-popup :show="showPopupLogin" @close="closePopup">
        <view class="index-popup-login-wrap">
          <u-icon
            @click="loginHandler"
            name="weixin-circle-fill"
            label="微信登录"
            labelPos="bottom"
            labelColor="#333333"
            color="#1ab119"
            space="26rpx"
            labelSize="36rpx"
            size="60"
          ></u-icon>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopupLogin: false,
    };
  },
  onLoad() {},
  methods: {
    jump() {
      this.$Router.replace({
        name: "checkpoint",
      });
    },
    loginPopup() {
      this.showPopupLogin = true;
    },
    closePopup() {
      this.showPopupLogin = false;
    },
    loginHandler() {
      uni.getUserProfile({
        desc: "登录",
        lang: "zh_CN",
        success: async (res) => {
          if (res.errMsg.includes("ok")) {
            uni.showLoading({
              title: "正在授权",
            });
            setTimeout(() => {
              uni.hideLoading();
            }, 100);
            this.jump();
          } else {
            this.$utils.showToast("您取消了登录授权");
          }
          this.closePopup();
        },
        fail: (res) => {
          this.closePopup();
          this.$utils.showToast("获取用户信息失败");
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #2f3542;
}
</style>
<style lang="scss" scoped>
.Index {
  .index-images-wrap {
    display: flex;
    justify-content: center;
    margin: 100rpx 0;
    .index-images {
      width: 100%;
      height: 600rpx;
    }
  }
  .index-start-games-wrap {
    margin: 284rpx 95rpx;
    .index-start-games-btn {
      padding: 18rpx;
      background-color: #ffa502;
      color: #ffffff;
    }
  }
  .index-popup-wrap {
    .index-popup-login-wrap {
      display: flex;
      justify-content: center;
      padding: 50rpx 0;
    }
  }
}
</style>
